<template>
  <section class="component repayment">
    <el-form
      :model="fromData"
      :rules="rules"
      ref="repayment-form"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：" prop="caseNumber">
            <el-input
              v-model.trim="fromData.caseNumber"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款方式：" prop="paymentType">
            <el-select
              placeholder="请选择"
              v-model="fromData.paymentType"
              @change="getReceiveAccount"
            >
              <el-option
                v-for="{ index, name, code } in $dict.getDictData(
                  'PaymentType'
                )"
                :key="index"
                :label="name"
                :value="code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收款账户：" prop="receiveAcctname">
            <el-input v-model.trim="fromData.receiveAcctname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收款账号：" prop="receiveAcctno">
            <el-input v-model.trim="fromData.receiveAcctno"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="回款日期：" prop="entryTime">
            <el-date-picker
              v-model.trim="fromData.entryTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款金额：" prop="repayAmount">
            <el-input
              v-model.trim="fromData.repayAmount"
              type="number"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="回款账户：" prop="repaymentAcctname">
            <el-input v-model.trim="fromData.repaymentAcctname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="回款账号：" prop="repaymentAcctno">
            <el-input v-model.trim="fromData.repaymentAcctno"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="催收人员：" prop="collectorId">
            <el-select
              v-model="fromData.collectorId"
              placeholder="请选择催收人员"
              @change="changeDept"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="催收部门：" prop="deptName">
            <el-input
              v-model.trim="fromData.deptName"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注：" prop="remark">
        <el-input
          type="textarea"
          v-model.trim="fromData.remark"
          style="width:95%"
          :maxlength="300"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="附件图片：" prop="imageUrl">
        <flie-upload
          :listType="'picture-card'"
          :AllowExtension="['jpg', 'png', 'jpeg']"
          @onUploadRemove="onUploadRemove"
          :fileList.sync="fileList"
        ></flie-upload>
      </el-form-item>
    </el-form>

    <div class="operate-buttons">
      <el-button @click="EmitClose">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      title="请选择收款账户"
      :visible.sync="dialog"
      append-to-body
      width="600px"
    >
      <repayment-receive-detail
        @close="dialog = false"
        :dataSet="dataSet"
        ref="repayment-receive-detail"
      />
    </el-dialog>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Action, Getter, namespace } from "vuex-class";
import { PrincipalService } from "~/services/domain-service/principal.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { Form } from "element-ui";
import ViewAttachList from "~/components/common/view-attach-list.vue";
import { UserService } from "~/services/management-service/user.service";
import FlieUpload from "~/components/common/file-upload.vue";
import { CaseRepaymentService } from "~/services/domain-service/case-repayment.service";
import RepaymentReceiveDetail from "./repayment-receive-detail.vue";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    FlieUpload,
    RepaymentReceiveDetail
  }
})
export default class Repayment extends Vue {
  @Dependencies(UserService)
  private userService: UserService;
  @Dependencies(CaseRepaymentService)
  private caseRepaymentService: CaseRepaymentService;
  @State
  private userData: any;
  @CollectionExecutionModule.Mutation private updateHistoryInfoActive;
  @CollectionExecutionModule.Mutation private updateAddRecordFlag;
  /**
   * 案件ID
   */
  @Prop({ type: Array, required: true })
  private caseIds;
  @Prop({ type: Array, required: true })
  private caseNumbers;

  private fromData: any = {
    caseTaskId: "",
    caseNumber: "",
    collectorId: "",
    collectorRealName: "",
    paymentType: "",
    receiveAcctname: "",
    receiveAcctno: "",
    entryTime: "",
    repayAmount: "",
    repaymentAcctname: "",
    repaymentAcctno: "",
    deptId: "",
    deptCode: "",
    deptName: "",
    imageUrl: [],
    remark: ""
  };
  private dialog = false;
  private dataSet = [];
  private selectionList = [];
  private fileList: any = [];
  //数据校验
  private rules: any = {
    caseTaskId: [
      { required: true, message: "订单id不能为空", trigger: "blur" }
    ],
    paymentType: [
      { required: true, message: "请选择收款方式", trigger: "blur" }
    ],
    receiveAcctname: [
      { required: true, message: "请输入收款账户", trigger: "blur" }
    ],
    receiveAcctno: [
      { required: true, message: "请输入收款账号", trigger: "blur" }
    ],
    entryTime: [{ required: true, message: "请选择回款日期", trigger: "blur" }],
    repayAmount: [
      { required: true, message: "请输入回款金额", trigger: "blur" }
    ],
    repaymentAcctname: [
      { required: true, message: "请输入回款账户", trigger: "blur" }
    ],
    repaymentAcctno: [
      { required: true, message: "请输入回款账号", trigger: "blur" }
    ]
  };
  private userList: any = [];
  @Emit("close") private EmitClose() {
    this.reset();
  }
  private getInfo() {
    this.getAllUserList();
    this.fromData.collectorId = this.userData.id;
    this.fromData.collectorRealName = this.userData.realName;
    this.fromData.deptId = this.userData.deptId;
    this.fromData.deptCode = this.userData.deptCode;
    this.fromData.deptName = this.userData.deptName;
    this.fromData.caseTaskId = this.caseIds[0];
    this.fromData.caseNumber = this.caseNumbers[0];
  }
  private commit() {
    const form: any = this.$refs["repayment-form"];
    form.validate(valid => {
      if (!valid) return false;
      this.fileList.forEach(element => {
        if (element.response) {
          this.fromData.imageUrl.push(element.response.id);
        }
      });
      this.caseRepaymentService
        .addCaseRepaymentApply(this.fromData)
        .subscribe(data => {
          this.$message.success("还款申请成功");
          this.EmitClose();
          this.onFollowSuccess();
        });
    });
  }
  private changeDept(val) {
    this.userList.forEach(item => {
      if (item.id === val) {
        this.fromData.collectorId = item.id;
        this.fromData.collectorRealName = item.realName;
        this.fromData.deptId = item.deptId;
        this.fromData.deptCode = item.deptCode;
        this.fromData.deptName = item.deptName;
      }
    });
  }
  private getReceiveAccount(val) {
    this.fromData.receiveAcctname = "";
    this.fromData.receiveAcctno = "";
    this.caseRepaymentService
      .getReceiveAccount(val, this.fromData.caseTaskId)
      .subscribe(data => {
        if (data.length > 1) {
          this.dataSet = data;
          this.dialog = true;
          this.$nextTick(() => {
            const from: any = this.$refs["repayment-receive-detail"];
            from.selectionList = [];
          });
        } else {
          this.fromData.receiveAcctname =
            (data.length && data[0].gatheringAccount) || "";
          this.fromData.receiveAcctno =
            (data.length && data[0].gatheringAccountNo) || "";
        }
      });
  }

  /**
   * 成功后更新历史纪录面板
   */
  private onFollowSuccess() {
    this.updateHistoryInfoActive("");
    this.updateAddRecordFlag(true);
    this.$nextTick(() => {
      this.updateHistoryInfoActive("repay-records");
    });
  }

  private getAllUserList() {
    this.userService
      .getAllUsersList({ userStatus: "ENABLED" })
      .subscribe(data => {
        this.userList = data;
      });
  }
  private onUploadRemove(file, fileList) {
    this.fileList = fileList;
  }
  //重置方法
  private reset() {
    const modifyForm: any = this.$refs["repayment-form"];
    modifyForm.resetFields();
    this.fileList = [];
  }
}
</script>
<style lang="less">
.component.repayment {
  max-height: 533px;
  overflow-y: auto;
}
</style>
